<template>
	<view>
		<view class="main_card">
			<view class="input_phone">
				<text class="left_txt">收货人</text>
				<input type="text" v-model="addressData.realname" style="font-size: 28rpx;" placeholder="填写收货人姓名"
					placeholder-style="font-size:28rpx;color:#CCCCCC ">
			</view>
			<view class="input_phone">
				<text class="left_txt">手机号码</text>
				<input type="text" v-model="addressData.mobile" style="font-size: 28rpx;" placeholder="请填写收货人手机号码"
					placeholder-style="font-size:28rpx;color:#CCCCCC ">
			</view>
			<view class="input_phone">
				<text class="left_txt">所在地区</text>
				<view class="" style="font-size: 28rpx;">
					<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
				</view>
				
			</view>
			<view class="input_phone" style="align-items: flex-start;">
				<text class="left_txt">详细地址</text>
				<textarea v-model="addressData.address" type="text" style="font-size: 28rpx;height: 130rpx;"
					placeholder="街道、楼牌号等" placeholder-style="font-size:28rpx;color:#CCCCCC "></textarea>
			</view>
		</view>
		<view class="card_d">
			<view class="">
				<view style="color: #121212;font-size: 28rpx;">
					设置默认地址
				</view>
				<view style="font-size: 22rpx;margin-top:10rpx;color: #666666 ;">
					提醒：下单会优先使用该地址
				</view>
			</view>
			<u-switch v-model="addressData.default" size="18"></u-switch>
		</view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Region from '@/components/region/region.vue';
	export default {
		components: {
			Region
		},
		data() {
			return {
				title: '',
				id: 0,
				defaultValue: [],
				addressData: {
					realname: '',
					mobile: '',
					address: '',
					area: '',
					default: false
				}
			}
		},
		onLoad(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			if (option.type === 'edit') {
				this.addressData = JSON.parse(option.data)

				this.addressData.area = this.addressData.area_id
				if (this.addressData.status == 1) {
					this.addressData.default = true;
				} else {
					this.addressData.default = false;
				}

				this.defaultValue = this.addressData.area_arr
			}

		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			onChangeRegion(region) {
				console.log(region)
				let id = 0;
				let area = [];
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
				this.addressData.area = id;
				console.log(this.addressData)
			},

			switchChange(e) {
				this.addressData.default = e.detail.value
			},

			//地图选择地址
			// chooseLocation() {
			// 	uni.chooseLocation({
			// 		success: (data) => {
			// 			this.addressData.addressName = data.name;
			// 			this.addressData.address = data.name;
			// 		}
			// 	})
			// },

			//提交
			async confirm() {
				if (!this.hasLogin) {
					this.islogin = true
					return false;
				}
				let dataObj = this.addressData;
				if (!dataObj.realname) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(dataObj.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				console.log(dataObj)
				if (!dataObj.area) {
					this.$api.msg('请选择区域');
					return;
				}
				if (!dataObj.address) {
					this.$api.msg('请输入详细地址');
					return;
				}

				dataObj.token = uni.getStorageSync('token')
				let res = await this.$myRequest({
					url: '/editAddress',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					uni.$emit('changeAddress')
					this.$api.msg(res.data.msg);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}
		},
	}
</script>
<style>
	page {
		background: #f6f6f6;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss">
	.main_card {
		margin-top: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		padding-top: 0;
		background-color: #fff;
	}
	
	.card_d {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;
	
	}
	
	.left_txt {
		font-size: 28rpx;
		color: #121212;
		min-width: 140rpx;
	}
	
	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 76upx;
		margin: 60upx auto;
		font-size: 26rpx;
		letter-spacing: 4upx;
		color: #fff;
		background-color: #29ad97;
		border-radius: 50upx;
		box-shadow: 1px 2px 5px #dadada;
	}
</style>